<template>
  <div class="main">
      <el-form
          ref="ruleFormRef"
          style="max-width: 600px"
          :model="password"
          :rules="passwordRules"
          label-width="auto"
          class="passFrom"
          status-icon
        >
        <h2 class="title">修改密码</h2>
        <el-form-item label="" prop="oldPassword">
          <el-input
            class="input_css"
            :type="isHide == true ? 'password' : 'text'"
            v-model.trim="password.oldPassword"
            clearable
            placeholder="旧密码">
            <template #prefix>
              <el-icon style="vertical-align: middle"><Lock /></el-icon>
            </template>
            <template #suffix>
              <el-icon style="vertical-align: middle">
                <Hide v-if="isHide" @click="isHide=false"/>
                <View v-else @click="isHide=true"/>
              </el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="" prop="newPassword">
          <el-input
            class="input_css"
            :type="isHide1 == true ? 'password' : 'text'"
            v-model.trim="password.newPassword"
            clearable
            placeholder="新密码">
            <template #prefix>
              <el-icon style="vertical-align: middle"><Lock /></el-icon>
            </template>
            <template #suffix>
              <el-icon style="vertical-align: middle">
                <Hide v-if="isHide1" @click="isHide1=false"/>
                <View v-else @click="isHide1=true"/>
              </el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="" prop="surePassword">
          <el-input
            class="input_css"
            :type="isSureHide ? 'password' : 'text'"
            v-model.trim="password.surePassword"
            clearable
            placeholder="确认密码"
           >
            <template #prefix>
              <el-icon style="vertical-align: middle"><Lock /></el-icon>
            </template>
            <template #suffix>
              <el-icon style="vertical-align: middle">
                <Hide v-if="isSureHide" @click="isSureHide=false"/>
                <View v-else @click="isSureHide=true"/>
              </el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-button type="primary" :loading="loading" @click="sureClick(ruleFormRef)" class="btn">修改密码</el-button>
        <!-- <el-button type="primary"  @click="test" class="btn">测试跳转</el-button> -->
      </el-form>
  </div>
</template>
<script lang="ts" setup>
import { reactive,ref,getCurrentInstance } from 'vue'
import { apiUpdatePassword } from '@/api/modules/login'
import { useMessage } from '@/hooks/message'
import type { ComponentSize, FormInstance, FormRules,ElInput, ElButton } from 'element-plus'
import { ElMessageBox } from 'element-plus'
import { useUserStore } from '@/store/modules/user'
const userStore = useUserStore();
// import FIInput from '@/components/FIInput'
// import FIButton from '@/components/FIButton'
import router from '@/router'
// let { proxy } = getCurrentInstance() as any;
const password = reactive({
  oldPassword:'',
  newPassword:'',
  surePassword:'',
})
const isHide = ref(true);
const isHide1 = ref(true);
const isSureHide = ref(true)

const loading = ref(false)
const passwordRules = reactive({
  oldPassword:[{ required: true, message: '此为必填项', trigger: 'blur' }],
  newPassword:[{ required: true, message: '此为必填项', trigger: 'blur' }],
  surePassword:[{ required: true, message: '此为必填项', trigger: 'blur' }]
})

const base64Encode = (str) => {
  return btoa(str);
}
const ruleFormRef = ref<FormInstance>()
// const test = async() =>{
//   // 1.执行退出登录接口
//   await userStore.FedLogOut();
//   router.push({ path:'/login' })
  
// }
const sureClick = async (formEl) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
      if (valid) {
        const {newPassword,oldPassword,surePassword} = password
        const allNumbers = /^[0-9]+$/;
        const allLetters = /^[a-zA-Z]+$/;
        if(newPassword.length < 6){
          useMessage().error('密码长度最少为六位，请重新输入。');
          return;
        }
        //禁止输入全为字母或全为数字
        if (allNumbers.test(newPassword) || allLetters.test(newPassword)) {
          useMessage().error('密码不能仅包含数字或字母，请重新输入。');
          return;
        }
        if(newPassword == oldPassword){
            useMessage().error('新密码不能与原密码相同！')
            return;
        }
        if(surePassword != newPassword){
            useMessage().error('两次新密码输入不一致！')
            return;
        }
        const oldPad = base64Encode(oldPassword);
        const newPad = base64Encode(newPassword);
        const obj = {
            loginName: "kangna",
            newPassword:newPad,
            oldPassword:oldPad
        }
        ElMessageBox.confirm('此操作将修改密码，是否继续?',{
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          apiUpdatePassword(obj).then(async(res) =>{
            if(res.success){
                // 1.执行退出登录接口
            await userStore.FedLogOut();
            router.push({ path:'/login' })
                useMessage().success(res.message)
            }
          }).catch((err) =>{
              // /useMessage().error(err.message)
          })
      }).catch(() => {
        useMessage().info('已取消')
      })
        
      }
       
    })
  }
</script>
<style lang="less" scoped>
.main{
    background: #ffffff;
    width:100%;
    height:calc(100vh - 180px);
    text-align: center;
    .passFrom{
        margin:0 auto;
        width: 400px;
        padding-top:160px;
        .title{
            font-size: 25px;
            font-weight: bold;
            margin: 0 auto 30px auto;
        }
        .input_css{
            margin-bottom:10px;
            height:40px;
            line-height:40px;
            font-size: 15px;
        }
        .btn{
            width: 100%;
            margin-top:50px;
            line-height:40px;
            height: 40px;
        }
    }
}
</style>